<template>
  <div>
    <div class="itembox vux-1px-b flex-row">
      <div class="flex-grow-0">
        <div>明星</div>
      </div>
      <div class="center_list clearfix" :class="show?'animate':''">
        <div class="list-title fl flex-x-center flex-y-center" v-for="(item) in list">{{item.title}}</div>
      </div>
      <div class="flex-grow-0" style="width: 1rem">
        <button @click="show=!show">切换</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "test",
    data() {
      return {
        show:false,
        list: [
          {title: '成龙'},
          {title: '周星驰'},
          {title: '哈哈哈'},
          {title: '哈哈哈'},
          {title: '成龙'},
          {title: '哈哈哈哈'},
          {title: '哈哈哈'},
          // {title: '成龙'},
          // {title: '哈哈哈'},
          // {title: '哈哈哈'},
          // {title: '成龙'},
        ]
      }
    },
    methods:{
      toggle(){

      }
    }
  }
</script>

<style scoped>
  .itembox{
    padding-top: 0.2rem;
  }
  .center_list{
    max-height: 0.68rem;
    overflow: hidden;
    /*transition: all 0.5s;*/
    transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
  }
  .animate {
    max-height: 9999rem;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
    /*padding:0 20px 10px;*/
  }
  .list-title{
    width: .98rem;
    height: .48rem;
    background-color: #f1f1f1;
    border-radius: 4px;
    margin-left: 0.23rem;
    font-size:.24rem;
    color: #9c9c9c;
    margin-bottom: 0.23rem;
  }
</style>